<template>
    <div style="display: flex;">
        <div style="margin-right: 20px;">
            <el-date-picker v-model="startDate" type="date" :placeholder="startPlaceholder"
                :disabledDate="startDiabledDate" v-bind="$attrs.startOptions"></el-date-picker>
        </div>
        <div>
            <el-date-picker v-model="endDate" type="date" :placeholder="endPlaceholder"
                :disabled="endDateDisabled" :disabledDate="endDiabledDate" v-bind="$attrs.endOptions"></el-date-picker>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'

let props = defineProps({
    // 开始时间的占位符
    startPlaceholder: {
        type: String,
        default: '请选择开始日期'
    },
    // 结束时间的占位符
    endPlaceholder: {
        type: String,
        default: '请选择结束日期'
    },
    // 是否禁用选择今天之前的日期
    disableToday: {
        type: Boolean,
        default: true
    }
})

let emits = defineEmits(['startChange', 'endChange'])

// 开始日期
let startDate = ref<Date | null>(null)
// 结束日期
let endDate = ref<Date | null>(null)
// 是否禁用结束时间
let endDateDisabled = ref<Boolean>(true)


// 禁用开始日期的函数
let startDiabledDate = (time: Date) => {
    if (props.disableToday) return time.getTime() < Date.now() - 1000 * 60 * 60 * 24
}
// 禁用结束日期的函数
let endDiabledDate = (time: Date) => {
    if (startDate.value) {
        return time.getTime() < startDate.value.getTime() + 1000 * 60 * 60 * 24
    }
}

// 监听开始日期的变化
watch(() => startDate.value, val => {
    if (!val) {
        endDateDisabled.value = true
        endDate.value = null
    } else {
        emits('startChange', val)
        endDateDisabled.value = false
    }
})

// 监听结束时间的变化
watch(() => endDate.value, val => {
    if (val) {
        emits('endChange', {
            startDate: startDate.value,
            endDate: val
        })
    }
})


</script>
<style lang="scss" scoped>
svg {
    width: 126px;
    height: 126px;
}
</style>